<template>
  <el-row>
    <el-col :span="11" style="border:1px solid rgba(121, 121, 121, 1)">
      <el-container style="height:660px">
        <el-header style="height:280px; padding:0">
          <courseDetails ref="courseDetailsArea"></courseDetails>
        </el-header>
        <el-divider></el-divider>
        <el-main>
          <courseAnnouncement></courseAnnouncement>
        </el-main>
      </el-container>
    </el-col>
    <el-col
      :span="11"
      style="border:1px solid rgba(121, 121, 121, 1); margin-left:12px;"
    >
      <el-container>
        <postAnnouncement style="height:660px; "></postAnnouncement>
      </el-container>
    </el-col>
  </el-row>
</template>

<script>
import courseDetails from "./courseDetails.vue";
import courseAnnouncement from "./courseAnnouncement.vue";
import postAnnouncement from "./postAnnouncement.vue";

export default {
  components: {
    courseDetails,
    courseAnnouncement,
    postAnnouncement,
  },
  data() {
    return {};
  },
  methods: {},
  mounted() {

  },
};
</script>

<style scoped>
.el-divider--horizontal {
  margin: auto;
  width: 92%;
}
</style>
